<template>
  <div>

    <el-form ref="postForm" :model="postForm" label-position="left" label-width="150px">

      <el-form-item label="服务提供商">
        <el-radio-group v-model="postForm.provider" size="small">
          <el-radio label="aliyun">阿里云</el-radio>
          <el-radio label="qcloud">腾讯云</el-radio>
        </el-radio-group>
      </el-form-item>

      <div v-if="postForm.provider==='aliyun'">

        <div class="doc">
          <el-link href="https://www.aliyun.com/product/directmail" target="_blank">产品链接：https://www.aliyun.com/product/directmail</el-link>
        </div>

        <el-form-item label="AccessKeyId">
          <el-input v-model="postForm.data.accessKeyId" size="small" placeholder="AccessKeyId" />
        </el-form-item>

        <el-form-item label="AccessKeySecret">
          <el-input v-model="postForm.data.accessKeySecret" size="small" placeholder="AccessKeySecret" />
        </el-form-item>

        <el-form-item label="发件箱">
          <el-input v-model="postForm.data.accountName" size="small" placeholder="发件箱" />
        </el-form-item>
      </div>

      <div v-if="postForm.provider==='qcloud'">

        <div class="doc">
          <el-link href="https://cloud.tencent.com/product/ses" target="_blank">产品链接：https://cloud.tencent.com/product/ses</el-link>
        </div>

        <el-form-item label="SecretId">
          <el-input v-model="postForm.data.secretId" size="small" placeholder="SecretId" />
        </el-form-item>

        <el-form-item label="SecretKey">
          <el-input v-model="postForm.data.secretKey" size="small" placeholder="SecretKey" />
        </el-form-item>

        <el-form-item label="发件箱">
          <el-input v-model="postForm.data.fromEmailAddress" size="small" placeholder="发件箱" />
        </el-form-item>

      </div>

      <el-form-item label="remark">
        <el-input v-model="postForm.remark" size="small" placeholder="备注信息" />
      </el-form-item>

    </el-form>

    <el-divider />

    <div style="margin-top: 20px">
      <el-button type="primary" @click="submitForm">保存</el-button>
    </div>

  </div>
</template>

<script>
import { fetchDetail, saveData } from '@/api/sys/config/prop'

export default {
  name: 'EmailConfig',
  data() {
    return {
      type: 'email',
      postForm: {
        provider: 'aliyun',
        data: {

        }
      },
      loading: false
    }
  },
  watch: {
    'postForm.provider': {
      handler(val) {
        this.fetchData(val)
      }
    }
  },
  created() {
    this.fetchData('')
  },
  methods: {

    fetchData(provider) {
      fetchDetail(this.type, provider).then(res => {
        // 清空表单
        this.postForm = { provider: provider, data: {}}

        if (res.data != null && res.data.provider != null && res.data.provider != '') {
          this.postForm = res.data

          // 转换JSON
          if (res.data.data != null && res.data.data != '') {
            this.postForm.data = JSON.parse(res.data.data)
          }
        }
      })
    },
    submitForm() {
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }

        this.loading = true

        // 类型
        this.postForm.type = this.type

        saveData(this.postForm).then(() => {
          this.$notify({
            title: '成功',
            message: '邮件方案保存成功！',
            type: 'success',
            duration: 2000
          })
        })
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
.doc {
  background: #f0f0f0;
  padding: 8px;
  margin-bottom: 20px;
  border-radius: 5px;
  margin-top: -10px;
}
</style>
